@import './special.scss';
@import 'element-plus/theme-chalk/dark/css-vars.css';
@import './transition.scss';

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --sider-width: 200px;
  --header-height: 60px;

  --el-color-primary: #165dff !important;
  --page-bg-color: #f2f3f5;

  --header-bg-color: #fff;
  --header-text-color-1: #1d2129;
  --header-text-color-2: #86909c;
  --header-text-color-3: #4e5969;
  --header-icon-border-color: #f2f3f5;
  --header-drop-hover-color: #f2f3f5;
  --header-border-color: #e5e6eb;
  --header-search-bg-color: #e5e6eb;

  --nav-bg-color: #fff;
  --nav-text-color: #4e5969;
  --nav-text-selected-color: #165dff;
  --nav-item-hover-color: #f2f3f5;
  --nav-fold-bg-color: #f1f5f9;

  --tag-bar-bg-color: #fff;
  --tag-border-color: rgb(229, 230, 235);
  --tag-text-color: #4e5969;
  --tag-bg-color: #f2f3f5;
  --tag-selected-text-color: #165dff;
  --tag-contextmenu-bg-color: #fff;
  --tag-contextmenu-text-color: #333;
  --tag-contextmenu-hover-color: #eee;

  --main-text-color-base: #1d2129;
  --main-bg-color: #fff;
  --main-border-color: #e5e6eb;
  --main-table-header-bg-color: #f2f3f5;
  --main-table-header-text-color: #1d2129;
  --main-gray-bg-color: #f9f9f9;
  --main-hover-bg: #e5e6eb;
  --main-select-color: #fff;
  --main-gray-bg-color-2: #f2f3f5;
  --main-gray-bg-color-3: #cdd0d6;
  --main-gray-hover-bg-color-2: #e5e6eb;
  --main-blue-bg-color: #e8f3ff;

  --input-bg-color: #f2f3f5;
  --input-hover-bg-color: #e5e6eb;
  --input-focus-bg-color: #fff;
  --table-text-color: #1d2129;
}

:root.dark {
  --el-color-primary: #0085f4 !important;
  --page-bg-color: rgba(255, 255, 255, 0.08);

  --header-bg-color: #232324;
  --header-text-color-1: #fff;
  --header-text-color-2: #86909c;
  --header-text-color-3: #c5c5c5;
  --header-icon-border-color: #2e2e30;
  --header-drop-hover-color: rgba(255, 255, 255, 0.08);
  --header-border-color: #333335;

  --nav-bg-color: #232324;
  --nav-text-color: rgba(255, 255, 255, 0.7);
  --nav-text-selected-color: #0085f4;
  --nav-item-hover-color: rgba(255, 255, 255, 0.08);
  --nav-fold-bg-color: rgba(255, 255, 255, 0.04);

  --tag-bar-bg-color: #232324;
  --tag-border-color: #333335;
  --tag-text-color: rgba(255, 255, 255, 0.7);
  --tag-bg-color: rgba(255, 255, 255, 0.08);
  --tag-selected-text-color: #0085f4;
  --tag-contextmenu-bg-color: #232324;
  --tag-contextmenu-text-color: #c5c5c5;
  --tag-contextmenu-hover-color: rgba(255, 255, 255, 0.08);

  --main-text-color-base: #fff;
  --main-bg-color: #232324;
  --main-border-color: #484849;
  --main-table-header-bg-color: #2e2e30;
  --main-table-header-text-color: #f6f6f6;
  --main-gray-bg-color: rgba(255, 255, 255, 0.08);
  --main-hover-bg: rgba(255, 255, 255, 0.12);
  --main-select-color: #000;
  --main-gray-bg-color-2: rgba(255, 255, 255, 0.08);
  --main-gray-bg-color-3: #2e2e30;
  --main-gray-hover-bg-color-2: rgba(255, 255, 255, 0.12);
  --main-blue-bg-color: #3c7eff33;

  --input-bg-color: rgba(255, 255, 255, 0.08);
  --input-hover-bg-color: rgba(255, 255, 255, 0.12);
  --input-focus-bg-color: #232324;
  --table-text-color: #f6f6f6;
}

@media (prefers-color-sheme: dark) {
}
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
